<template>
  <div class="vb-switch-wrapper">
    <input
      :name="name"
      type="checkbox"
      class="vb-switch-input"
      :checked='isClicked'
    >
    <span  v-if="inactiveText" :style="{color:(isClicked?'#303133':'#409eff')}">{{inactiveText}}</span>
    <span
      class="vb-switch-core"
      :class="(isClicked?'vb-switch-core-clicked':'vb-switch-core')"
      :style="{background:(isClicked?activeColor:inactiveColor),width:width+'px'}"
      @click="handleClick"
    >
    </span>
    <span v-if="activeText" :style="{color:(isClicked?'#409eff':'#303133')}">{{activeText}}</span>
  </div>
</template>
<script>
import Input from "./Input.vue";
export default {
  components: { Input },
  name: "vb-switch",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    activeColor: {
      type: String,
      default: "#409eff",
    },

    inactiveColor: {
      type: String,
      default: "#dcdfe6",
    },
    name: {
      type: String,
      default: "",
    },
    width:{
        type:Number,
        default:40,
    },
    activeText:{
        type: String,
        default: "",
    },
    inactiveText:{
        type: String,
        default: "",
    }
  },
  data() {
    return {
      isClicked: false,
    };
  },
  methods: {
    handleClick() {
      this.isClicked = !this.isClicked;
      //实现v-model的双向绑定
      this.$emit("input", !this.value);
    },
  },
  mounted() {},
};
</script>
<style lang='scss' scoped>
@import "@/assets/css/Switch.scss";
</style>